<template>
  <div class="component-docs">
    <div class="docs-title">📚 Modal 组件文档</div>

    <!-- Props 文档 -->
    <div class="docs-section">
      <h3 class="docs-subtitle">Props 属性</h3>
      <div class="docs-table">
        <table>
          <thead>
            <tr>
              <th>属性名</th>
              <th>类型</th>
              <th>默认值</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prop in modalProps" :key="prop.name">
              <td class="prop-name">{{ prop.name }}</td>
              <td class="prop-type">{{ prop.type }}</td>
              <td class="prop-default">{{ prop.default }}</td>
              <td class="prop-description">{{ prop.description }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Emits 文档 -->
    <div class="docs-section">
      <h3 class="docs-subtitle">Emits 事件</h3>
      <div class="docs-table">
        <table>
          <thead>
            <tr>
              <th>事件名</th>
              <th>参数</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="emit in modalEmits" :key="emit.name">
              <td class="emit-name">{{ emit.name }}</td>
              <td class="param-type">
                <div v-if="emit.parameters.length > 0">
                  <div v-for="param in emit.parameters" :key="param.name" class="param-item">
                    <span class="param-name">{{ param.name }}</span>
                    <span class="param-type-text">: {{ param.type }}</span>
                    <span class="param-description"> - {{ param.description }}</span>
                  </div>
                </div>
                <span v-else class="text-base-content/50">无</span>
              </td>
              <td class="emit-description">{{ emit.description }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Slots 文档 -->
    <div class="docs-section">
      <h3 class="docs-subtitle">Slots 插槽</h3>
      <div class="docs-table">
        <table>
          <thead>
            <tr>
              <th>插槽名</th>
              <th>参数</th>
              <th>描述</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="slot in modalSlots" :key="slot.name">
              <td class="slot-name">{{ slot.name }}</td>
              <td class="slot-prop-type">
                <div v-if="slot.parameters.length > 0">
                  <div v-for="param in slot.parameters" :key="param.name" class="param-item">
                    <span class="slot-prop-name">{{ param.name }}</span>
                    <span class="param-type-text">: {{ param.type }}</span>
                    <span class="param-description"> - {{ param.description }}</span>
                  </div>
                </div>
                <span v-else class="text-base-content/50">无</span>
              </td>
              <td class="slot-description">{{ slot.description }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 使用示例 -->
    <div class="docs-section">
      <h3 class="docs-subtitle">使用示例</h3>
      <div class="code-example">
        <pre><code>&lt;template&gt;
  &lt;Modal
    v-model:visible="showModal"
    size="lg"
    :mask-closable="true"
    :esc-closable="true"
    custom-class="my-modal"
    backdrop-class="my-backdrop"
    @close="handleClose"
    @show="handleShow"
    @hide="handleHide"
  &gt;
    &lt;!-- 自定义遮罩层 --&gt;
    &lt;template #backdrop&gt;
      &lt;div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-md"&gt;&lt;/div&gt;
    &lt;/template&gt;

    &lt;!-- 自定义头部 --&gt;
    &lt;template #header="{ close }"&gt;
      &lt;div class="bg-primary text-primary-content p-6"&gt;
        &lt;div class="flex items-center justify-between"&gt;
          &lt;h3 class="text-xl font-bold"&gt;自定义标题&lt;/h3&gt;
          &lt;button @click="close" class="btn btn-ghost btn-sm btn-circle"&gt;
            &lt;svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"&gt;
              &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    &lt;!-- 自定义内容区域 --&gt;
    &lt;template #content="{ close }"&gt;
      &lt;div class="p-8"&gt;
        &lt;!-- 你的自定义内容 --&gt;
      &lt;/div&gt;
    &lt;/template&gt;

    &lt;!-- 自定义底部 --&gt;
    &lt;template #footer="{ close }"&gt;
      &lt;div class="bg-base-200 p-6"&gt;
        &lt;div class="flex justify-end gap-3"&gt;
          &lt;button @click="close" class="btn btn-outline"&gt;取消&lt;/button&gt;
          &lt;button @click="close" class="btn btn-primary"&gt;确认&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/Modal&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { ref } from 'vue'
import { Modal } from '@/components/common/modal'

const showModal = ref(false)

const handleClose = () => {
  console.log('Modal closed')
}

const handleShow = () => {
  console.log('Modal shown')
}

const handleHide = () => {
  console.log('Modal hidden')
}
&lt;/script&gt;</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { modalProps, modalEmits, modalSlots } from './componentDocs'

defineOptions({
  name: 'ModalComponentDocs',
})
</script>

<style scoped>
.component-docs {
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.docs-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--bc));
  margin-bottom: 2rem;
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

.docs-section {
  margin-bottom: 2rem;
}

.docs-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--bc));
  margin-bottom: 1rem;
  font-family:
    'Inter',
    'SF Pro Display',
    'SF Pro Text',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    sans-serif;
}

.docs-table {
  overflow-x: auto;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--bc) / 0.1);
}

.docs-table table {
  width: 100%;
  border-collapse: collapse;
  background: hsl(var(--b1));
}

.docs-table th {
  background: hsl(var(--b2));
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: hsl(var(--bc));
  border-bottom: 1px solid hsl(var(--bc) / 0.1);
  font-size: 0.875rem;
}

.docs-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--bc) / 0.05);
  vertical-align: top;
}

.docs-table tr:last-child td {
  border-bottom: none;
}

.prop-name,
.emit-name,
.slot-name {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  font-weight: 600;
  color: hsl(var(--p));
  background: hsl(var(--p) / 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.prop-type,
.param-type,
.slot-prop-type {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  color: hsl(var(--s));
  font-size: 0.875rem;
}

.prop-default {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  color: hsl(var(--a));
  background: hsl(var(--a) / 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.prop-description,
.emit-description,
.slot-description {
  color: hsl(var(--bc) / 0.8);
  font-size: 0.875rem;
  line-height: 1.5;
}

.param-item {
  margin-bottom: 0.5rem;
}

.param-item:last-child {
  margin-bottom: 0;
}

.param-name,
.slot-prop-name {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  font-weight: 600;
  color: hsl(var(--p));
}

.param-type-text {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  color: hsl(var(--s));
}

.param-description {
  color: hsl(var(--bc) / 0.7);
}

.code-example {
  background: hsl(var(--b2));
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid hsl(var(--bc) / 0.1);
}

.code-example pre {
  background: transparent;
  padding: 1.5rem;
  margin: 0;
  overflow-x: auto;
}

.code-example code {
  font-family:
    'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', 'Courier New',
    monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--bc));
}

/* 响应式设计 */
@media (max-width: 768px) {
  .docs-table {
    font-size: 0.75rem;
  }

  .docs-table th,
  .docs-table td {
    padding: 0.5rem 0.75rem;
  }

  .code-example pre {
    padding: 1rem;
  }

  .code-example code {
    font-size: 0.75rem;
  }
}
</style>
